<template>
  <div id="fund">
    <div class="header">
      <span class="_txt">资金</span>
      <span class="_icon" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div class="graph_huge">
      <GrapHuge></GrapHuge>
    </div>
    <div class="graph_thiny_1 graph">
      <div class="_box">
        <div class="_txt"><span>收益状态</span></div>
        <div class="_sumNum">
          <span class="_num">{{numData.earnNum}}</span>
          <p
            style="width:10%;float:left;display:block;line-height:62.5px;"
          >元</p> 
        </div>
      </div>
    </div>
    <div class="graph_thiny_2 graph">
      <div class="_box">
        <div class="_chart _c2" id="chart_2"></div>
        <div class="_chart _c3" id="chart_3"></div>
      </div>
    </div>
    <div class="socket">
      <div class="_box">
        <div class="_create _button">
          <span class="_txt">投资项目管理</span>
          <span class="_b1">
            <i class="el-icon-arrow-right"></i>
          </span>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570969386235&di=203fdf7679380356f7be99819c928760&imgtype=0&src=http%3A%2F%2Fimg.u88.cn%2Ftuijian%2Fcjimg%2F2019-01-24%2F90797%2F205791971111.jpeg" alt="">
        </div>
        <div class="_state _button">
          <span class="_txt">资金合约状态</span>
          <span class="_b1">
            <i class="el-icon-arrow-right"></i>
          </span>
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=565365580,782567906&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="_service _button" @click="goTo('/other/service')">
          <span class="_txt">联系服务通道</span>
          <span class="_b1">
            <i class="el-icon-arrow-right"></i>
          </span>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570969647942&di=cdb365333e658bfa6ae67a381fe1a7b2&imgtype=0&src=http%3A%2F%2Fimage1.hhczy.com%2Fweb%2F2017%2F9%2F22%2F323939220511004.700x700.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GrapHuge from '../../components/showData.vue'
export default {
   
  data () {
    return {
      chardata_1:{
          
        },
      chardata_2:{
          
        },
      chardata_3:{
          
        },
      active:0,
      numData:{
        earnNum:'3,000,000.00',
      },
      linkData:{

      }
    }
  }, 
  components:{GrapHuge},
  mounted(){
    this.allotData();
    this.SetEchart();
  },
  
  computed: {
    getGrapData(){
      return this.$store.getters.getGrapData
    }
  }, 
  methods:{
    goTo:function(Path){
      this.$router.push({
          path:Path,
          query:{
              history: this.$route.path,
          }
      });
    },
    SetEchart(){
        // 基于准备好的dom，初始化echarts实例
      let myChart_2 = this.$echarts.init(document.getElementById('chart_2'));
      let myChart_3 = this.$echarts.init(document.getElementById('chart_3'));
      // 绘制图表
      
      var  option_2 = {
        title:{
          text:'月收支状态',
          textStyle:{
            fontSize:16,

          },
        },
        grid:{
          bottom:'5%',
          top:'30%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data:['收入','支出','差额'],
            itemWidth:10,
            itemHeight:3,
            top:20,
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel:{
                  fontSize:10,
                },
                splitLine:{
                  show:false,
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}',
                    fontSize:7,
                },
                splitLine:{
                  show:false,
                }
            },
            {
                type: 'value',
            
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}%',
                    fontSize:7,
                },
                splitLine:{
                  show:false,
                }
            }
        ],
        series: [
        {
            name:'收入',
            type:'bar',
            data:this.chardata_2.ch1
        },
        {
            name:'支出',
            type:'bar',
            data:this.chardata_2.ch2
        },
        {
            name:'差额',
            type:'line',
            yAxisIndex: 1,
            data:this.chardata_2.ch3
        }
        ],
        top:30,
      };
      let option_3 = {
        title : {
            text: '资金使用方向',
            x:'center',
            textStyle:{
              fontSize:14,
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            position: [10, 10],
            textStyle:{
              fontSize:8,
            }
        },
        legend:{
          type:'scroll',
          data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8',],
          itemWidth:5,
          itemHeight:5,
          bottom:2,
          borderRadius: 5, 
          selectedMode:false,
        },
        calculable : true,
        series : [
            {
                name:'资金使用方向',
                type:'pie',
                radius : ['30%','60%'],
                center : ['50%', '50%'],
                
                label:{
                  show:false,
                },
                data:this.chardata_3.ch1,
            }
        ]
      };
      myChart_2.setOption(option_2);
      myChart_3.setOption(option_3);
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    allotData(){
      var temp = this.getGrapData;
      //console.log(temp);
      this.chardata_1 = temp[0];
      this.chardata_2 = temp[1];
      this.chardata_3 = temp[2];
    },
  }
}
</script>

<style scoped>
/*全局 */
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  #fund{
    width: 100%;
    height: 800px;

  }
  .header{
    width: 100%;
    height: 50px;
    background: linear-gradient(to right,#ff6600    ,#ff3300);
    color: #fff;
    position:fixed;
    z-index: 500;
  }
  .graph{
    width: 100%;
    height: 15%;
    background: #f5f5f5;
    border-top:solid 1px #999;
    position: relative;
    top: 50px;
  }
  .graph_huge{
    top: 50px;
    width: 100%;
    height: 25%;
    background: #fff;
    position: relative;
  }
  .socket{
    width:100%;
    height: 240px;
    border-top:solid 1px #999;
    position: relative;
    top: 50px;
  }
/*header */
  .header ._txt{
    height:50px;
    text-align:left;
    font-weight: 600;
    font-size: 20px;
    width: 90%;
    margin: 0 auto auto 15px;
    position: absolute;
    line-height: 50px;
  }
  .header ._icon{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    font-size:40px; 
    color:#666;
  }
/*graph_huge部分组件 */
  .graph_huge ._box{
    width: 100%;
    height: 100%;
  }
  .graph_huge ._left{
    height: 100%;
    width:40%;
    position: relative;
    background:#000;
    float: left;
  }
  .graph_huge ._left ._cardBox{
    width:100%;
    height: 100%;
    background: #333;
    
  }
  .graph_huge ._right{
    height: 100%;
    width: 60%;
    position: relative;
    float: left;
  }
  .graph_huge ._left ._txt{
    position:absolute;
    height:50%;
    width:66%;
    top:25%;
    left:17%;
    color:#fc6;
    font-size: 4em;
    text-align: center;
    line-height: 175%;
    font-weight: 600;
  }
  .graph_huge ._left ._label{
    width: 100%;
    color:#fc6;
    font-size: 1.25em;
    position:absolute;
    bottom: 5%;
  }
  /*引用*/
    .container {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 80%;
      height:100%;
    }
    .container .circle {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      background: rgba(138, 43, 226, 0.02);
    }
    .container .circle:nth-of-type(1) {
      width: 80%;
      height: 58%;
      animation: rt 6s infinite linear;
      box-shadow: 0 0 1px 0 rgb(255, 137, 68), inset 0 0 10px 0 rgb(226, 43, 98);
    }
    .container .circle:nth-of-type(2) {
      width: 90%;
      height: 50%;
      animation: rt 10s infinite linear;
      box-shadow: 0 0 1px 0 rgb(211, 0, 0), inset 0 0 10px 0 rgb(211, 60, 0);
    }
    .container .circle:nth-of-type(3) {
      width: 84%;
      height: 45%;
      animation: rt 5s infinite linear;
      box-shadow: 0 0 1px 0 rgb(139, 0, 46), inset 0 0 10px 0 rgb(139, 0, 139);
    }
    .container .circle:nth-of-type(4) {
      width: 92%;
      height: 52%;
      animation: rt 15s infinite linear;
      box-shadow: 0 0 1px 0 rgb(255, 238, 0), inset 0 0 10px 0 rgb(255, 0, 43);
    }

    @keyframes rt {
      100% {
        transform: rotate(360deg);
      }
    }
/*graph 部分组件*/
  .graph ._box{
    width: 100%;
    height: 100%;
  }
  .graph_thiny_2 ._box ._chart{
    position: relative;
    float: left;
  }
  .graph_thiny_2 ._c2{
    width: 60%;
    height: 100%; 
  }
  .graph_thiny_2 ._c3{
    width: 40%;
    height: 100%;
  }
  /*graph_1 */
  .graph_thiny_1{
    background: linear-gradient(to bottom,#fa7821    ,#ff4617);
  }
  .graph_thiny_1 ._txt{
    width:100%;
    height: 30%;
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #f5f5f5;
  }
  .graph_thiny_1 ._txt span{
    position:absolute;
    left:5%;
    line-height: 200%;
  }
  .graph_thiny_1 ._box{
    position: relative;
  }
  .graph_thiny_1 ._sumNum{
    width: 90%;
    top:10%;
    position:relative;
    margin: 0 auto;
    color:#f5f5f5;
    font-size: 20px;
    line-height: 50px;
  }
  .graph_thiny_1 ._sumNum span{
     text-align: left;
     font-size: 50px;
     width: 90%;
     position: relative;
     float: left;
  }
/*socket 部分组件 */
  .socket ._box{
    width:95%;
    margin: 0 auto;
  }
  .socket ._button{
    width:100%;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    height: 70px;
    margin:10px 0px;
    position: relative;
    overflow: hidden;
  }
  .socket ._txt{
    height: 100%;
    width: 70%;
    position: absolute;
    float: left;
    margin: 0 auto auto 20px;
    font-size:25px;
    font-weight: 400;
    vertical-align:middle;
    line-height: 70px;
    color: rgb(46, 46, 46);
  }
  .socket ._b1{
    height: 30px;
    width: 30px;

    position: absolute;
    top:20px;
    right:20px;
    font-size: 30px;
  }
  .socket img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
    opacity: 0.5;
  }
</style>

  function newFunction() {
    this.chardata_1=this.getGrapData[0];
    this.chardata_2=this.getGrapData[1];
    this.chardata_3=this.getGrapData[2];
  }
